<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>GoJS&reg; Model Class</title>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../assets/js/bootstrap.min.js"></script>
    <script src="../../assets/js/highlight.js"></script>
    <script src="../../assets/js/api.js"></script>

    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
    <!-- custom CSS after bootstrap -->
    <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
    <!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
    <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />

    </head>

    <body>
    <!--
  <div id="topbar">
    <div id="topbar-inner">
      <ul>
        <li><a href="../../index.html">Home</a></li>
        <li><a href="../../learn/index.html">Learn</a></li>
        <li><a href="../../samples/index.html">Samples</a></li>
        <li><a href="../../intro/index.html">Intro</a></li>
        <li><a href="../index.html">API</a></li>
        <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
        <li><a href="../../doc/download.html">Download</a></li>
        <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
        <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
        <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
        <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
      </ul>
    </div>
  </div>
-->


  <!-- non-fixed navbar -->
    <nav id="api-nav" class="navbar navbar-inverse navbar-top">
      <div class="container">
        <div class="navbar-header" data-toggle="collapse" data-target="#navbar">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!--<a class="navbar-brand" href="#">GoJS</a>-->
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="../../index.html">Home</a></li>
            <li><a href="../../learn/index.html">Learn</a></li>
            <li><a href="../../samples/index.html">Samples</a></li>
            <li><a href="../../intro/index.html">Intro</a></li>
            <li><a href="../../api/index.html">API</a></li>
            <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
            <li><a href="../../doc/download.html">Download</a></li>
            <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
            <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
            <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
            <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>


    <div class="container-fluid" id="api-container">
    <div class="row">

<!-- ============================== classes index ============================ -->
     <div id="navindex" class="col-md-2">
        <!-- begin publish.classesIndex -->
        <!-- <div><a href="../index.html">GoJS Class Index</a></div> -->

<div class="sidebar-nav">
  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#DiagramNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Diagram Classes</span>
    </div>
    <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
      
        <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
      
        
      
        <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
      
        <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
      
        
      
        <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
      
        <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
      
        
      
        
      
        <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
      
        <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
      
        <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
      
        <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
      
        
      
        <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
      
        
      
        
      
        <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
      
        <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
      
        
      
        <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
      
        
      
        
      
        <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#GeometryNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Geometry Classes</span>
    </div>
    <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
      
        <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
      
        
      
        
      
        <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
      
        <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
      
        <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ModelNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Model Classes</span>
    </div>
    <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
      
        
      
        <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
      
        
      
        
      
        <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
      
        
      
        <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#LayoutNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Layout Classes</span>
    </div>
    <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
      
        
      
        <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
      
        
      
        <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ToolNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Tool Classes</span>
    </div>
    <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
      
        <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
      
        
      
        <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
      
        
      
        
      
        <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
      
        <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
      
        <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
      
        <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
      
        <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
      
        <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
      
        <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
      
        <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#CollectionNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Collection Classes</span>
    </div>
    <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
      
        <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
      
        <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>
</div> <!-- /class="sidebar-nav -->




        <!-- end publish.classesIndex -->
    </div>

    <div id="contentBody" class="col-md-10">
    <!-- ============================== header ================================= -->
    <div id="header" class="fineprint mt30">
      <b>GoJS</b>&reg; Diagramming Components<br/>version 1.6.10 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
    </div>

<!-- ============================== class title ============================ -->
            <h2 class="classTitle mt30">
                
                Class Model
                
            </h2>

<!-- ============================== class summary ========================== -->
      <span class="hideshowall">
        <span class="nodetails"><button id="buttonShow">Show Details</button></span>
        <span class="details"><button id="buttonHide">Show Summaries</button></span>
      </span>

            <p class="classsummary">
                
                

                Models hold the essential data of a diagram, describing the basic entities and their properties and relationshipswithout specifying the appearance and behavior of the Nodes and Links and Groups that represent them visually.Models tend to hold only relatively simple data, making them easy to persist by serialization as JSON or XML formatted text.<p>Models hold simple data objects, not <a href="../symbols/Part.html" class="linkConstructor">Part</a>s such as <a href="../symbols/Node.html" class="linkConstructor">Node</a>s or <a href="../symbols/Link.html" class="linkConstructor">Link</a>s.Node data is normally represented in a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> by instances of <a href="../symbols/Node.html" class="linkConstructor">Node</a>,but they could be represented by simple <a href="../symbols/Part.html" class="linkConstructor">Part</a>s or by <a href="../symbols/Group.html" class="linkConstructor">Group</a>s.A Diagram constructs Parts for its <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a>'s data by copying templates.Templates are <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s of <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s that get some property values from the model data,accessible via the <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> property, using data <a href="../symbols/Binding.html" class="linkConstructor">Binding</a>.See <a href="../../intro/usingModels.html">Using Models</a> and <a href="../../intro/dataBinding.html">Data Binding</a> for an introduction.<p>This Model class only supports holding an array of node dataand interpreting properties on that data to be able to refer to themusing unique key values.To support simple tree-structured graphs, use a <a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, which inherits from this class.To support links and grouping, use a <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>.<p>Each node data object is assumed to have a unique key value.The <a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">nodeKeyProperty</a> property names the property on the node data whose valueis the unique key for that node data object.The default value for this property is "key".You should not have a TwoWay data binding on the node key property,because that might cause the property value to be set to a duplicate key value.<p>The key values must be either strings or numbers or undefined.If the key is undefined, or if there are duplicate key values,the model will automatically try to assign a new unique key value.Caution: if your keys are numbers, do not try to use string representations of those numbers as keys.Conversely, if your keys are strings that happen to have number syntax, do not try to use those number values.Sometimes JavaScript will automatically convert from string to number or vice-versa, but sometimes it won't.<p>For example, one can define a graph consisting of just two nodes:<pre class="javascript"> model.nodeDataArray = [   { key: "Alpha" },   { key: "Beta" } ];</pre><p>This model cannot detect the modification of the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> arrayor the modification of any node data object.If you want to add or remove node data from the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a>,call the <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a> or <a href="../symbols/Model.html#removeNodeData" class="linkMethod">removeNodeData</a> methods.<p>If you want to modify a node data object, it depends on whether the property you want to changeis a structural property that the model needs to know about, or whether it is a propertythat is only used for data binding or other application-specific purposes.<p>For the former case, call the appropriate method, such as<a href="../symbols/Model.html#setKeyForNodeData" class="linkMethod">setKeyForNodeData</a>, <a href="../symbols/Model.html#setCategoryForNodeData" class="linkMethod">setCategoryForNodeData</a>,<a href="../symbols/GraphLinksModel.html#setToKeyForLinkData" class="linkMethod">GraphLinksModel.setToKeyForLinkData</a>, or <a href="../symbols/GraphLinksModel.html#setGroupKeyForNodeData" class="linkMethod">GraphLinksModel.setGroupKeyForNodeData</a>.These methods have names that start with "set", "add", "insert", or "remove".<p>For the latter case, when setting an application-specific property, typically for data binding,and to support undo/redo, call <a href="../symbols/Model.html#setDataProperty" class="linkMethod">setDataProperty</a>.<p>The <a href="../symbols/Model.html#copyNodeData" class="linkMethod">copyNodeData</a> method can be called to make a shallow copy of a node data object.However, if some of those property values are Arrays that want not to be shared but to be copied,you can set <a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a> to true.  This is typically very useful when dealingwith data bound item arrays.Furthermore if the items in those copied Arrays are in fact Objects that need to be copied,you can also set <a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a> to true, causing a copied Array to refer tonewly shallow-copied objects of the original array.<p>Each model raises <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>s that you can follow by registering a listener via <a href="../symbols/Model.html#addChangedListener" class="linkMethod">addChangedListener</a>.Read more at the Introduction page: <a href="../../intro/changedEvents.html">Changed Events</a>.<p>Each model comes with its own <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a> that is initially not enabled.You will need to set <a href="../symbols/UndoManager.html#isEnabled" class="linkProperty">UndoManager.isEnabled</a> to true in order for theUndoManager to record model changes and for your users to perform undo and redo.<p>You can temporarily turn off the recording of changes by setting<a href="../symbols/Model.html#skipsUndoManager" class="linkProperty">skipsUndoManager</a> to true.A number of places within the system do that routinely in order to avoid recording temporary changes,so be sure to remember the original value beforehand and restore it afterwards.<p>One normally saves a diagram by just saving its model.If you can use JSON-formatted text, this is easy to do -- just call <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a>to get the string representation of the model, and save that string.Load the diagram by replacing the <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a> with one created by callingthe static function <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a>:<pre class="javascript">  myDiagram.model = go.Model.fromJson(loadedString);</pre>Note that JSON and other textual data formats cannot faithfully store all JavaScript functions.<a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a> and <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> do not try to save and load functional property values.You should arrange that all such functions, including event handlers, are established by your app.<a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a> and <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> also cannot handle circular references; any sharing ofreferences will be lost too.They also skip properties that are not enumerable, those whose names start with an underscore, and those whose values are undefined.<p>Note that models also do not store the templates used by diagrams,nor any transient or temporary parts such as <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a>s, nor any tools,nor any <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a> state, nor any event listeners.These objects and all other properties of diagrams must be established by your app.<p>You can add any number of properties to the <a href="../symbols/Model.html#modelData" class="linkProperty">modelData</a> object, which is serialized and deserializedinto JSON just like any other model data for nodes or links.However <a href="../symbols/Model.html#modelData" class="linkProperty">modelData</a> is associated with the model as a whole and does not depend on the existenceof any node data or link data.<p>It is also easy to save the changes that were recorded in the most recent transaction.Call <a href="../symbols/Model.html#toIncrementalJson" class="linkMethod">toIncrementalJson</a> to generate a JSON-format string that holds the current state of modified dataplus the keys of inserted or removed data.That method requires as an argument a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> that represents a transaction that completed oran undo or a redo that just finished.<p>It is also possible to use such "incremental" JSON to modify an existing model.Call <a href="../symbols/Model.html#applyIncrementalJson" class="linkMethod">applyIncrementalJson</a>, giving it a string generated by <a href="../symbols/Model.html#toIncrementalJson" class="linkMethod">toIncrementalJson</a>,to modify this model by making all of the changes recorded in the JSON text.Note how this method is a regular instance method, whereas <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> is a static function.
            </p>

<!-- ============================== constructor summary ==================== -->
            
        <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
            <div class="table-responsive">
            <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Model.">
                <thead>
                        <tr>
                            <th scope="col" class="name">Name</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="name" >
                            <div class="name">
                                Model(nodedataarray)
                            </div>
              </td>
              <td class="description">
                            <div class="description">
                            <!--newp--><p><p>You probably don't want to call this constructor, because this classdoes not support links (relationships between nodes) or groups (nodes and links and subgraphs as nodes):instead, create instances of a subclass such as <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> or <a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a>.<span class="nodetails" id="xconModel"><a class="morelink" onclick="hst('conModel')">More...</a></span> <span class="details" id="conModel"></span>
                        
                            <dl class="detailList">
                            <dt class="heading">Parameters:</dt>
                            
                                <dt>
                                    <span class="light fixedFont">{Array=}</span>  <b>nodedataarray</b>
                                    
                                </dt>
                                    <dd>an optional Array containing JavaScript objects to be represented by <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.</dd>
                            
                            </dl>
                        
                        


              </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div><!-- class="table-responsive">-->
            

<!-- ============================== properties summary ===================== -->
            
                
                
        <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
        <div class="table-responsive">
        <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Model.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name, Value Type</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
              <tr id="copiesArrayObjects" >
                
                <td class="name">
                  <div class="name">
                    copiesArrayObjects
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                      <span class="since" title="since">1.5</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether the default behavior for <a href="../symbols/Model.html#copyNodeData" class="linkMethod">copyNodeData</a> when copying Arrays also copies array items that are Objects.<span class="nodetails" id="xpropcopiesArrayObjects"><a class="morelink" onclick="hst('propcopiesArrayObjects')">More...</a></span> <span class="details" id="propcopiesArrayObjects">This only covers copying Objects that are items in Arrays that are copied when <a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a> is true.Copying an Object when this property is true also recursively copies any Arrays that are property values.It also assumes that the object's constructor can be called with no arguments.</span><div class="details" id="dpropcopiesArrayObjects"><p>The default value is false.This property does not affect any behavior when the value of <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a> has been set to a function.This property has no effect unless <a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a> is true.<p>Caution: if you want a copied data object to share some references but not others,you will need to provide your own copying function as <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a> rather than settingthis property and <a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a> to true.<p>Warning: there should not be any cyclical references within the model data.</div>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a></li>
                            
                                <li><a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="copiesArrays" >
                
                <td class="name">
                  <div class="name">
                    copiesArrays
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                      <span class="since" title="since">1.5</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether the default behavior for <a href="../symbols/Model.html#copyNodeData" class="linkMethod">copyNodeData</a> makes copies of property values that are Arrays.<span class="nodetails" id="xpropcopiesArrays"><a class="morelink" onclick="hst('propcopiesArrays')">More...</a></span> <span class="details" id="propcopiesArrays">This only copies Arrays that are top-level property values in node data objects, not for Arrays that are in nested objects.Copying Arrays will also copy any array items that are Objects when <a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a> is true.</span><div class="details" id="dpropcopiesArrays"><p>The default value is false.It is commonplace to set <a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a> to true when setting this property to true.This property does not affect any behavior when the value of <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a> has been set to a function.<p>Caution: if you want a copied data object to share some Arrays but not others,you will need to provide your own copying function as <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a> rather than settingthis property to true.<p>Warning: there should not be any cyclical references within the model data.</div>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a></li>
                            
                                <li><a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="copyNodeDataFunction" >
                
                <td class="name">
                  <div class="name">
                    copyNodeDataFunction
                  </div>
                  <div class="attributes">
                    <span class="light">{function(Object, Model):Object | null}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets a function that makes a copy of a node data object.<span class="nodetails" id="xpropcopyNodeDataFunction"><a class="morelink" onclick="hst('propcopyNodeDataFunction')">More...</a></span> <span class="details" id="propcopyNodeDataFunction"></span><div class="details" id="dpropcopyNodeDataFunction"><p>You may need to set this property in order to ensure that a copied <a href="../symbols/Node.html" class="linkConstructor">Node</a> is boundto data that does not share certain data structures between the original node data and the copied node data.This property value may be null in order to cause <a href="../symbols/Model.html#copyNodeData" class="linkMethod">copyNodeData</a> to make a shallow copy of a JavaScript Object.The default value is null.<p>The first argument to the function will be a node data object (potentially a Part#data).The second argument to the function will be this Model itself.<p>It is common to implement a copying function when the node data has an Array of dataand that Array needs to be copied rather than shared.Often the objects that are in the Array also need to be copied.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="dataFormat" >
                
                <td class="name">
                  <div class="name">
                    dataFormat
                  </div>
                  <div class="attributes">
                    <span class="light">{string}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the name of the format of the diagram data.<span class="nodetails" id="xpropdataFormat"><a class="morelink" onclick="hst('propdataFormat')">More...</a></span> <span class="details" id="propdataFormat">The default value is the empty string.The value must not be null.Use different values to prevent parts from one model to be copy/pasted or drag-and-dropped into another diagram/model.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="isReadOnly" >
                
                <td class="name">
                  <div class="name">
                    isReadOnly
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether this model may be modified, such as adding nodes.<span class="nodetails" id="xpropisReadOnly"><a class="morelink" onclick="hst('propisReadOnly')">More...</a></span> <span class="details" id="propisReadOnly">By default this value is false.Setting the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> to something that is not a true Array of Objectswill cause this to be set to true.</span><div class="details" id="dpropisReadOnly"><p>Model methods and property setters do not heed this property.It is up to code that uses a model to check this property when it might want toprevent changes to the model.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="makeUniqueKeyFunction" >
                
                <td class="name">
                  <div class="name">
                    makeUniqueKeyFunction
                  </div>
                  <div class="attributes">
                    <span class="light">{function(Model, Object):(string|number) | null}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets a function that returns a unique id number or string for a node data object.<span class="nodetails" id="xpropmakeUniqueKeyFunction"><a class="morelink" onclick="hst('propmakeUniqueKeyFunction')">More...</a></span> <span class="details" id="propmakeUniqueKeyFunction">This function is called by <a href="../symbols/Model.html#makeNodeDataKeyUnique" class="linkMethod">makeNodeDataKeyUnique</a>when a node data object is added to the model, either as part of a new<a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> or by a call to <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a>, to make sure the value of<a href="../symbols/Model.html#getKeyForNodeData" class="linkMethod">getKeyForNodeData</a> is unique within the model.</span><div class="details" id="dpropmakeUniqueKeyFunction"><p>The value may be null in order to cause <a href="../symbols/Model.html#makeNodeDataKeyUnique" class="linkMethod">makeNodeDataKeyUnique</a> behave in the standard manner.(The default value is null.)You may want to supply a function here in order to make sure all of the automatically generated keysare in a particular format.Setting this property after setting <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> has no real effect until there is a callto <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a>.<p>If a node data object is already in the model and you want to change its key value,call <a href="../symbols/Model.html#setKeyForNodeData" class="linkMethod">setKeyForNodeData</a> with a new and unique key.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="modelData" >
                
                <td class="name">
                  <div class="name">
                    modelData
                  </div>
                  <div class="attributes">
                    <span class="light">{Object}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets a JavaScript Object that can hold programmer-defined property values for the model as a whole,rather than just for one node or one link.<span class="nodetails" id="xpropmodelData"><a class="morelink" onclick="hst('propmodelData')">More...</a></span> <span class="details" id="propmodelData"></span><div class="details" id="dpropmodelData"><p>By default this an object with no properties.Any properties that you add to this object will be written out by <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a>and will be restored by <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a>, if the following conditions are true:<ul><li>the property is enumerable and its name does not start with an underscore ('_')</li><li>the property value is not undefined and is not a function</li><li>the model knows how to convert the property value to JSON format</li><li>property values that are Objects or Arrays form a tree structure -- no shared or cyclical references</li></ul>Most object classes cannot be serialized into JSON without special knowledge and processing at both ends.The <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a> and <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> methods automatically do such processing for numbers that are NaNand for objects that are of class <a href="../symbols/Point.html" class="linkConstructor">Point</a>, <a href="../symbols/Size.html" class="linkConstructor">Size</a>, <a href="../symbols/Rect.html" class="linkConstructor">Rect</a>, <a href="../symbols/Margin.html" class="linkConstructor">Margin</a>, <a href="../symbols/Spot.html" class="linkConstructor">Spot</a>,<a href="../symbols/Brush.html" class="linkConstructor">Brush</a> (but not for brush patterns), and for <a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a>.<p>At the current time one cannot have a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> as a binding target.Calling <a href="../symbols/Model.html#setDataProperty" class="linkMethod">setDataProperty</a> will work to change a property value, but there are no target bindings in any Diagrams to be updated.Because the binding mechanism is unavailable for this object, we recommend that when you want to save a modelthat you explicitly set properties on this object just before calling <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a>.When loading a model, call <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> and explicitly get the properties that you want to set on a Diagram.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="name" >
                
                <td class="name">
                  <div class="name">
                    name
                  </div>
                  <div class="attributes">
                    <span class="light">{string}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the name of this model.<span class="nodetails" id="xpropname"><a class="morelink" onclick="hst('propname')">More...</a></span> <span class="details" id="propname">The initial name is an empty string.The value must not be null.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="nodeCategoryProperty" >
                
                <td class="name">
                  <div class="name">
                    nodeCategoryProperty
                  </div>
                  <div class="attributes">
                    <span class="light">{string|function(Object,string=):string}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the name of the node data property that returns a string naming that data's category,or a function that takes a node data object and returns the category name;the default value is the name 'category'.<span class="nodetails" id="xpropnodeCategoryProperty"><a class="morelink" onclick="hst('propnodeCategoryProperty')">More...</a></span> <span class="details" id="propnodeCategoryProperty">This is used by the diagram to distinguish between different kinds of nodes.The name must not be null.If the value is an empty string,<a href="../symbols/Model.html#getCategoryForNodeData" class="linkMethod">getCategoryForNodeData</a> will return an empty string for all node data objects.</span>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/Model.html#getCategoryForNodeData" class="linkMethod">getCategoryForNodeData</a></li>
                            
                                <li><a href="../symbols/Model.html#setCategoryForNodeData" class="linkMethod">setCategoryForNodeData</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="nodeDataArray" >
                
                <td class="name">
                  <div class="name">
                    nodeDataArray
                  </div>
                  <div class="attributes">
                    <span class="light">{Array.&lt;Object&gt;}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the array of node data objects that correspond to <a href="../symbols/Node.html" class="linkConstructor">Node</a>s,<a href="../symbols/Group.html" class="linkConstructor">Group</a>s, or non-Link <a href="../symbols/Part.html" class="linkConstructor">Part</a>s in the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>.<span class="nodetails" id="xpropnodeDataArray"><a class="morelink" onclick="hst('propnodeDataArray')">More...</a></span> <span class="details" id="propnodeDataArray">The initial value is an empty Array.</span><div class="details" id="dpropnodeDataArray"><p>For each Object in the Array, <a href="../symbols/Model.html#getKeyForNodeData" class="linkMethod">getKeyForNodeData</a> should return a number or stringuniquely identifying the node data within the model.If it returns undefined, this calls <a href="../symbols/Model.html#makeNodeDataKeyUnique" class="linkMethod">makeNodeDataKeyUnique</a>,to make sure the node data has a unique key.These key values may be used by other objects to refer to that particular node data object.If more than one node data object has the same key,there may be some confusion about which object to reference.<p>If you want to use a custom data property for holding the unique key value on a node data object,you should set <a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">nodeKeyProperty</a> before you set this <code>nodeDataArray</code> property.<p>Adding or removing data from this Array will not notify this model or the diagramthat there are any new nodes or that any nodes have been deleted.Instead you should call <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a> or <a href="../symbols/Model.html#removeNodeData" class="linkMethod">removeNodeData</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="nodeKeyProperty" >
                
                <td class="name">
                  <div class="name">
                    nodeKeyProperty
                  </div>
                  <div class="attributes">
                    <span class="light">{string|function(Object,(string|number)=):(string|number)}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the name of the data property that returns a unique id number or stringfor each node data object, or a function taking a node data object and returning the key value;the default value is the name 'key'.<span class="nodetails" id="xpropnodeKeyProperty"><a class="morelink" onclick="hst('propnodeKeyProperty')">More...</a></span> <span class="details" id="propnodeKeyProperty">The name must not be null or the empty string.You must set this property before assigning the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a>.</span>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/Model.html#getKeyForNodeData" class="linkMethod">getKeyForNodeData</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="skipsUndoManager" >
                
                <td class="name">
                  <div class="name">
                    skipsUndoManager
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>s are not recorded by the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.<span class="nodetails" id="xpropskipsUndoManager"><a class="morelink" onclick="hst('propskipsUndoManager')">More...</a></span> <span class="details" id="propskipsUndoManager">The initial and normal value is false.</span><div class="details" id="dpropskipsUndoManager"><p>When this property is true, changing the Model or any data object does not call <a href="../symbols/UndoManager.html#handleChanged" class="linkMethod">UndoManager.handleChanged</a>.Even when this property is true,transactions (such as calls to <a href="../symbols/Model.html#startTransaction" class="linkMethod">startTransaction</a>) and undo/redo (such as calls to <a href="../symbols/CommandHandler.html#undo" class="linkMethod">CommandHandler.undo</a>)are still delegated to the <a href="../symbols/Model.html#undoManager" class="linkProperty">undoManager</a>.<p>You should set this to true only temporarily, and you should remember its previous value before setting this to true.When finishing the period for which you want the UndoManager to be disabled,do not blindly set this property to false.You should set this back to the value it had before you set it to true.For more permanent disabling of the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>, set <a href="../symbols/UndoManager.html#isEnabled" class="linkProperty">UndoManager.isEnabled</a> to false.<p>This property is also set when setting <a href="../symbols/Diagram.html#skipsUndoManager" class="linkProperty">Diagram.skipsUndoManager</a>.Setting this property does not raise a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="undoManager" >
                
                <td class="name">
                  <div class="name">
                    undoManager
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a> for this Model.<span class="nodetails" id="xpropundoManager"><a class="morelink" onclick="hst('propundoManager')">More...</a></span> <span class="details" id="propundoManager"></span><div class="details" id="dpropundoManager"><p>The default UndoManager has its <a href="../symbols/UndoManager.html#isEnabled" class="linkProperty">UndoManager.isEnabled</a> property set to false.If you want users to undo and redo, you should set that property to true once you have initialized the Diagram or its Model.<p>This property setter does not raise a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

                
            

<!-- ============================== methods summary ======================== -->
            
                
                
        <h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
                <div class="table-responsive">
                <table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class Model.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name, Return Type</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
            <tr id="addArrayItem">
                <td class="name">
                  
                  <div class="name">
                    addArrayItem(arr, val)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.1</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Add an item at the end of a data array that may be data bound by a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> as its <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>,in a manner that can be undone/redone and that automatically updates any bindings.<span class="nodetails" id="xmethaddArrayItem"><a class="morelink" onclick="hst('methaddArrayItem')">More...</a></span> <span class="details" id="methaddArrayItem"></span><div class="details" id="dmethaddArrayItem"><p>This also calls <a href="../symbols/Model.html#raiseChangedEvent" class="linkMethod">raiseChangedEvent</a> to notify all listeners about the <a href="../symbols/ChangedEvent.html#Insert" class="linkConstant">ChangedEvent.Insert</a>.<p>If you want to add a new node or part to the diagram, call <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a>.</div>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Model.html#insertArrayItem" class="linkMethod">insertArrayItem</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Array}</span> <b>arr</b>
                                          
                                      </dt>
                                      <dd>an Array that is the value of some <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>'s <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{*}</span> <b>val</b>
                                          
                                      </dt>
                                      <dd>the new value to be pushed onto the array.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="addChangedListener">
                <td class="name">
                  
                  <div class="name">
                    addChangedListener(listener)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Register an event handler that is called when there is a ChangedEvent.<span class="nodetails" id="xmethaddChangedListener"><a class="morelink" onclick="hst('methaddChangedListener')">More...</a></span> <span class="details" id="methaddChangedListener"></span><div class="details" id="dmethaddChangedListener"><p>This registration does not raise a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>.In case a Diagram's Model may be replaced, you may prefer calling <a href="../symbols/Diagram.html#addModelChangedListener" class="linkMethod">Diagram.addModelChangedListener</a> instead of this method.<p>Event listeners are not written out by <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a>.</div>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Model.html#removeChangedListener" class="linkMethod">removeChangedListener</a></li>
                                
                                    <li><a href="../symbols/Diagram.html#addModelChangedListener" class="linkMethod">Diagram.addModelChangedListener</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{function(ChangedEvent)}</span> <b>listener</b>
                                          
                                      </dt>
                                      <dd>a function that takes a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> as its argument.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="addNodeData">
                <td class="name">
                  
                  <div class="name">
                    addNodeData(nodedata)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>When you want to add a node or group to the diagram,call this method with a new data object.<span class="nodetails" id="xmethaddNodeData"><a class="morelink" onclick="hst('methaddNodeData')">More...</a></span> <span class="details" id="methaddNodeData">This will add that data to the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> andnotify all listeners that a new node data object has been inserted into the collection.</span><div class="details" id="dmethaddNodeData"><p>To remove a node from the diagram, you can remove its data object by calling <a href="../symbols/Model.html#removeNodeData" class="linkMethod">removeNodeData</a>.<p>To add or remove an object or value from an item array, call <a href="../symbols/Model.html#insertArrayItem" class="linkMethod">insertArrayItem</a> or <a href="../symbols/Model.html#removeArrayItem" class="linkMethod">removeArrayItem</a>.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>nodedata</b>
                                          
                                      </dt>
                                      <dd>a JavaScript object represented by a node, group, or non-link.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="addNodeDataCollection">
                <td class="name">
                  
                  <div class="name">
                    addNodeDataCollection(coll)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.3</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Add to this model all of the node data held in an Array or in an <a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a> of node data objects.<span class="nodetails" id="xmethaddNodeDataCollection"><a class="morelink" onclick="hst('methaddNodeDataCollection')">More...</a></span> <span class="details" id="methaddNodeDataCollection"></span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Iterable.<Object>|Array.<Object>}</span> <b>coll</b>
                                          
                                      </dt>
                                      <dd>a collection of node data objects to add to the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a></dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="applyIncrementalJson">
                <td class="name">
                  
                  <div class="name">
                    applyIncrementalJson(s)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.6</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Modify this model by applying the changes given in an "incremental" model change in JSON formatgenerated by <a href="../symbols/Model.html#toIncrementalJson" class="linkMethod">toIncrementalJson</a>.<span class="nodetails" id="xmethapplyIncrementalJson"><a class="morelink" onclick="hst('methapplyIncrementalJson')">More...</a></span> <span class="details" id="methapplyIncrementalJson">Incremental changes must be applied in the same order that the changes occurred in the original model.</span><div class="details" id="dmethapplyIncrementalJson"><p>This requires the "incremental" property to be present and to be a number, as specified by <a href="../symbols/Model.html#toIncrementalJson" class="linkMethod">toIncrementalJson</a>.All of the top-level properties in the JSON, such as <a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">nodeKeyProperty</a>, must be the same as for this model.<p>This conducts a transaction.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string|Object}</span> <b>s</b>
                                          
                                      </dt>
                                      <dd>a String in JSON format containing modifications to be performed to the model,   or a JavaScript Object parsed from such a string</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="clear">
                <td class="name">
                  
                  <div class="name">
                    clear()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Clear out all references to any model data.<span class="nodetails" id="xmethclear"><a class="morelink" onclick="hst('methclear')">More...</a></span> <span class="details" id="methclear">This also clears out the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>, so this operation is not undoable.This method is called by <a href="../symbols/Diagram.html#clear" class="linkMethod">Diagram.clear</a>; it does not notify any <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>s or other listeners.This method does not unregister any Changed event listeners.</span><div class="details" id="dmethclear"><p>Instead of calling this method, you may prefer to set <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> to an empty JavaScript Array.If this model is a <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>, you would also want to set <a href="../symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">GraphLinksModel.linkDataArray</a> to a separate empty JavaScript Array.</div>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="cloneProtected">
                <td class="name">
                  
                  <div class="name">
                    cloneProtected(copy)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.6</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Copies properties from this model to the given model, which must be of the same class.<span class="nodetails" id="xmethcloneProtected"><a class="morelink" onclick="hst('methcloneProtected')">More...</a></span> <span class="details" id="methcloneProtected">This is called by <a href="../symbols/Model.html#copy" class="linkMethod">copy</a>.This method may be overridden.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Model.html" class="linkConstructor">Model</a>}</span> <b>copy</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="commitTransaction">
                <td class="name">
                  
                  <div class="name">
                    commitTransaction(tname)
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Commit the changes of the current transaction.<span class="nodetails" id="xmethcommitTransaction"><a class="morelink" onclick="hst('methcommitTransaction')">More...</a></span> <span class="details" id="methcommitTransaction">This just calls <a href="../symbols/UndoManager.html#commitTransaction" class="linkMethod">UndoManager.commitTransaction</a>.</span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string=}</span> <b>tname</b>
                                          
                                      </dt>
                                      <dd>a descriptive name for the transaction.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{boolean}</span> the value returned by <a href="../symbols/UndoManager.html#commitTransaction" class="linkMethod">UndoManager.commitTransaction</a>.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="containsNodeData">
                <td class="name">
                  
                  <div class="name">
                    containsNodeData(nodedata)
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Decide if a given node data object is in this model, using reference equality.<span class="nodetails" id="xmethcontainsNodeData"><a class="morelink" onclick="hst('methcontainsNodeData')">More...</a></span> <span class="details" id="methcontainsNodeData"></span><div class="details" id="dmethcontainsNodeData"><p>If you do not have a reference to the particular data object that is in the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a>,you may need to search for it by iterating through that Array,or by finding the desired <a href="../symbols/Node.html" class="linkConstructor">Node</a> or simple #Part in a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> and getting that node's <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a>,or most likely by calling <a href="../symbols/Model.html#findNodeDataForKey" class="linkMethod">findNodeDataForKey</a>.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>nodedata</b>
                                          
                                      </dt>
                                      <dd>a JavaScript object represented by a node, group, or non-link.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{boolean}</span> true if it is a node data object in this model; false otherwise.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="copy">
                <td class="name">
                  
                  <div class="name">
                    copy()
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Model.html" class="linkConstructor">Model</a>}</span>
                    
                      <span class="since" title="since">1.6</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Creates a shallow copy of this Model and returns it.<span class="nodetails" id="xmethcopy"><a class="morelink" onclick="hst('methcopy')">More...</a></span> <span class="details" id="methcopy"><em>The data are not copied:</em> <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a>, <a href="../symbols/Model.html#modelData" class="linkProperty">modelData</a>,<a href="../symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">GraphLinksModel.linkDataArray</a>, <a href="../symbols/GraphLinksModel.html#archetypeNodeData" class="linkProperty">GraphLinksModel.archetypeNodeData</a> are left empty.Nor are any Changed listeners or the UndoManager copied.</span>
                 
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/Model.html" class="linkConstructor">Model</a>}</span> an empty copy of the model with the same properties, other than data</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="copyNodeData">
                <td class="name">
                  
                  <div class="name">
                    copyNodeData(nodedata)
                  </div>
                  <div class="attributes">
                    <span class="light">{Object}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Make a copy of a node data object.<span class="nodetails" id="xmethcopyNodeData"><a class="morelink" onclick="hst('methcopyNodeData')">More...</a></span> <span class="details" id="methcopyNodeData">This uses the value of <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a> to actually perform the copy, unless that property is null.When it is null the default behavior is to just make a shallow copy of the JavaScript Object.</span><div class="details" id="dmethcopyNodeData"><p>However when <a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a> is true, this will make a copy of property values that are JavaScript Arrays.This is useful when you do not want the Arrays to be shared between the node data objects.Note that if you want to copy some property values that are Arrays but not other properties that are Arrays,you cannot use <a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a> but must implement your own <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a>.<p>In addition when <a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a> is true, if items in the Array being copied are JavaScript Objects,those objects are copied, recursively.This is useful when the items in copied Arrays are themselves objects that need to be copied.Note that if you want to share references to some but not all of the objects in copied Arrays you cannot use<a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a> but must implement your own <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a>.<p>This does not modify the model -- the returned data object is not added to this model.This assumes that the data's constructor can be called with no arguments.<p>Models should not have any references to Diagrams or GraphObjects or Tools or Layouts or other objectsthat form a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>.<p>Warning: there should not be any cyclical references within the model data, unless youeither do not turn on <a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a> or <a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a> or unless you havesupplied your own <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a> that can handle cyclical references.</div>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>nodedata</b>
                                          
                                      </dt>
                                      <dd>a JavaScript object represented by a node, group, or non-link.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{Object}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="findNodeDataForKey">
                <td class="name">
                  
                  <div class="name">
                    findNodeDataForKey(key)
                  </div>
                  <div class="attributes">
                    <span class="light">{Object}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Given a number or string, find the node data object in this modelthat uses the given value as its unique key.<span class="nodetails" id="xmethfindNodeDataForKey"><a class="morelink" onclick="hst('methfindNodeDataForKey')">More...</a></span> <span class="details" id="methfindNodeDataForKey"></span>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Model.html#containsNodeData" class="linkMethod">containsNodeData</a></li>
                                
                                    <li><a href="../symbols/Model.html#getKeyForNodeData" class="linkMethod">getKeyForNodeData</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{(string|number|undefined)}</span> <b>key</b>
                                          
                                      </dt>
                                      <dd>a string or a number.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{Object}</span> null if the key is not present in the model,or if the key is null or undefined or not a string or number.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id=".fromJson">
                <td class="name">
                  &lt;static&gt; 
                  <div class="name">
                    Model.fromJson(s, model)
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Model.html" class="linkConstructor">Model</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This static function parses a string in JSON format and constructs, initializes, and returns a model.<span class="nodetails" id="xmethfromJson"><a class="morelink" onclick="hst('methfromJson')">More...</a></span> <span class="details" id="methfromJson"></span><div class="details" id="dmethfromJson"><p>Note that properties with values that are functions are not written out by <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a>,so reading in such a model will require constructing such a model, initializing its functional property values,and explicitly passing it in as the second argument.<p>Typical usage:<pre class="javascript">var modelAsText = ...;  // fetch the model in textual format from a databasemyDiagram.model = go.Model.fromJson(modelAsText);</pre></div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string|Object}</span> <b>s</b>
                                          
                                      </dt>
                                      <dd>a String in JSON format containing all of the persistent properties of the model, or an Object already read from JSON text.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Model.html" class="linkConstructor">Model</a>=}</span> <b>model</b>
                                          
                                      </dt>
                                      <dd>an optional model to be modified; if not supplied, it constructs and returns a new model whose name is specified by the "class" property.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/Model.html" class="linkConstructor">Model</a>}</span> the supplied or created model loaded with data from the given string.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="getCategoryForNodeData">
                <td class="name">
                  
                  <div class="name">
                    getCategoryForNodeData(nodedata)
                  </div>
                  <div class="attributes">
                    <span class="light">{string}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Find the category of a given node data, a string naming the node templateor group template or part templatethat the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> should use to represent the node data.<span class="nodetails" id="xmethgetCategoryForNodeData"><a class="morelink" onclick="hst('methgetCategoryForNodeData')">More...</a></span> <span class="details" id="methgetCategoryForNodeData"></span>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Model.html#nodeCategoryProperty" class="linkProperty">nodeCategoryProperty</a></li>
                                
                                    <li><a href="../symbols/Model.html#setCategoryForNodeData" class="linkMethod">setCategoryForNodeData</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>nodedata</b>
                                          
                                      </dt>
                                      <dd>a JavaScript object represented by a node, group, or non-link.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{string}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="getKeyForNodeData">
                <td class="name">
                  
                  <div class="name">
                    getKeyForNodeData(nodedata)
                  </div>
                  <div class="attributes">
                    <span class="light">{string|number|undefined}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Given a node data object return its unique key: a number or a string.<span class="nodetails" id="xmethgetKeyForNodeData"><a class="morelink" onclick="hst('methgetKeyForNodeData')">More...</a></span> <span class="details" id="methgetKeyForNodeData">This returns undefined if there is no key value.</span><div class="details" id="dmethgetKeyForNodeData"><p>It is possible to change the key for a node data object by calling <a href="../symbols/Model.html#setKeyForNodeData" class="linkMethod">setKeyForNodeData</a>.</div>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">nodeKeyProperty</a></li>
                                
                                    <li><a href="../symbols/Model.html#setKeyForNodeData" class="linkMethod">setKeyForNodeData</a></li>
                                
                                    <li><a href="../symbols/Model.html#findNodeDataForKey" class="linkMethod">findNodeDataForKey</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>nodedata</b>
                                          
                                      </dt>
                                      <dd>a JavaScript object represented by a node, group, or non-link.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{string|number|undefined}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="insertArrayItem">
                <td class="name">
                  
                  <div class="name">
                    insertArrayItem(arr, idx, val)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Add an item to a data array that may be data bound by a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> as its <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>,given a new data value and the index at which to insert the new value, in a manner that can be undone/redone and that automatically updates any bindings.<span class="nodetails" id="xmethinsertArrayItem"><a class="morelink" onclick="hst('methinsertArrayItem')">More...</a></span> <span class="details" id="methinsertArrayItem"></span><div class="details" id="dmethinsertArrayItem"><p>This also calls <a href="../symbols/Model.html#raiseChangedEvent" class="linkMethod">raiseChangedEvent</a> to notify all listeners about the <a href="../symbols/ChangedEvent.html#Insert" class="linkConstant">ChangedEvent.Insert</a>.<p>If you want to add a new node or part to the diagram, call <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a>.</div>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Model.html#removeArrayItem" class="linkMethod">removeArrayItem</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Array}</span> <b>arr</b>
                                          
                                      </dt>
                                      <dd>an Array that is the value of some <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>'s <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{number}</span> <b>idx</b>
                                          
                                      </dt>
                                      <dd>the zero-based array index where the new value will be inserted; use -1 to push the new value on the end of the array.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{*}</span> <b>val</b>
                                          
                                      </dt>
                                      <dd>the new value to be inserted into the array.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="makeNodeDataKeyUnique">
                <td class="name">
                  
                  <div class="name">
                    makeNodeDataKeyUnique(nodedata)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This method is called when a node data object is added to the model to make sure that<a href="../symbols/Model.html#getKeyForNodeData" class="linkMethod">getKeyForNodeData</a> returns a unique key value.<span class="nodetails" id="xmethmakeNodeDataKeyUnique"><a class="morelink" onclick="hst('methmakeNodeDataKeyUnique')">More...</a></span> <span class="details" id="methmakeNodeDataKeyUnique"></span><div class="details" id="dmethmakeNodeDataKeyUnique"><p>The key value should be unique within the set of data managed by this model:<a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a>.If the key is already in use, this will assign an unused number to the<a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">nodeKeyProperty</a> property on the data.<p>If you want to customize the way in which node data gets a unique key,you can set the <a href="../symbols/Model.html#makeUniqueKeyFunction" class="linkProperty">makeUniqueKeyFunction</a> functional property.<p>If the node data object is already in the model and you want to change its key value,call <a href="../symbols/Model.html#setKeyForNodeData" class="linkMethod">setKeyForNodeData</a> and give it a new unique key value.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>nodedata</b>
                                          
                                      </dt>
                                      <dd>a JavaScript object represented by a node, group, or non-link.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="raiseChangedEvent">
                <td class="name">
                  
                  <div class="name">
                    raiseChangedEvent(change, propertyname, obj, oldval, newval, oldparam, newparam)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Call this method to notify that the model or its objects have changed.<span class="nodetails" id="xmethraiseChangedEvent"><a class="morelink" onclick="hst('methraiseChangedEvent')">More...</a></span> <span class="details" id="methraiseChangedEvent">This constructs a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> and calls all Changed listeners.</span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{EnumValue}</span> <b>change</b>
                                          
                                      </dt>
                                      <dd>specifies the general nature of the change; typically the value is <a href="../symbols/ChangedEvent.html#Property" class="linkConstant">ChangedEvent.Property</a>.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string|function(Object):*}</span> <b>propertyname</b>
                                          
                                      </dt>
                                      <dd>names the property that was modified, or a function that takes an Object and returns the property value.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>obj</b>
                                          
                                      </dt>
                                      <dd>the object that was modified, typically a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>, <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>, or a <a href="../symbols/Model.html" class="linkConstructor">Model</a>.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{*}</span> <b>oldval</b>
                                          
                                      </dt>
                                      <dd>the previous or older value.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{*}</span> <b>newval</b>
                                          
                                      </dt>
                                      <dd>the next or newer value.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{*=}</span> <b>oldparam</b>
                                          
                                      </dt>
                                      <dd>an optional value that helps describe the older value.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{*=}</span> <b>newparam</b>
                                          
                                      </dt>
                                      <dd>an optional value that helps describe the newer value.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="raiseDataChanged">
                <td class="name">
                  
                  <div class="name">
                    raiseDataChanged(data, propertyname, oldval, newval, oldparam, newparam)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Call this method to notify about a data property having changed value.<span class="nodetails" id="xmethraiseDataChanged"><a class="morelink" onclick="hst('methraiseDataChanged')">More...</a></span> <span class="details" id="methraiseDataChanged">This constructs a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> and calls all Changed listeners.</span><div class="details" id="dmethraiseDataChanged"><p>You should call this method only if the property value actually changed.This method is called by <a href="../symbols/Model.html#setDataProperty" class="linkMethod">setDataProperty</a>.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>data</b>
                                          
                                      </dt>
                                      <dd>the data object whose property changed value.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string|function(Object):*}</span> <b>propertyname</b>
                                          
                                      </dt>
                                      <dd>the name of the property, or a function that takes an Object and returns the property value.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{*}</span> <b>oldval</b>
                                          
                                      </dt>
                                      <dd>the previous or old value for the property.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{*}</span> <b>newval</b>
                                          
                                      </dt>
                                      <dd>the next or new value for the property.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{*=}</span> <b>oldparam</b>
                                          
                                      </dt>
                                      <dd>an optional value additionally describing the old value.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{*=}</span> <b>newparam</b>
                                          
                                      </dt>
                                      <dd>an optional value additionally describing the new value.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="removeArrayItem">
                <td class="name">
                  
                  <div class="name">
                    removeArrayItem(arr, idx)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Remove an item from a data array that may be data bound by a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> as its <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>,given the index at which to remove a data value, in a manner that can be undone/redone and that automatically updates any bindings.<span class="nodetails" id="xmethremoveArrayItem"><a class="morelink" onclick="hst('methremoveArrayItem')">More...</a></span> <span class="details" id="methremoveArrayItem"></span><div class="details" id="dmethremoveArrayItem"><p>This also calls <a href="../symbols/Model.html#raiseChangedEvent" class="linkMethod">raiseChangedEvent</a> to notify all listeners about the <a href="../symbols/ChangedEvent.html#Remove" class="linkConstant">ChangedEvent.Remove</a>.<p>If you want to remove a node from the diagram, call <a href="../symbols/Model.html#removeNodeData" class="linkMethod">removeNodeData</a>.<p>Note that there is no version of this method that takes an item value instead of an index into the array.Because item arrays may hold any JavaScript value, including numbers and strings, there may be duplicate entries with that value in the array.To avoid ambiguity, removing an item from an array requires an index.</div>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Model.html#insertArrayItem" class="linkMethod">insertArrayItem</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Array}</span> <b>arr</b>
                                          
                                      </dt>
                                      <dd>an Array that is the value of some <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>'s <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{number=}</span> <b>idx</b>
                                          
                                      </dt>
                                      <dd>the zero-based array index of the data item to be removed from the array;  if not supplied it will remove the last item of the array.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="removeChangedListener">
                <td class="name">
                  
                  <div class="name">
                    removeChangedListener(listener)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Unregister an event handler listener.<span class="nodetails" id="xmethremoveChangedListener"><a class="morelink" onclick="hst('methremoveChangedListener')">More...</a></span> <span class="details" id="methremoveChangedListener"></span><div class="details" id="dmethremoveChangedListener"><p>This deregistration does not raise a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>.In case a Diagram's Model may be replaced, you may prefer calling <a href="../symbols/Diagram.html#removeModelChangedListener" class="linkMethod">Diagram.removeModelChangedListener</a> instead of this method.</div>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Model.html#addChangedListener" class="linkMethod">addChangedListener</a></li>
                                
                                    <li><a href="../symbols/Diagram.html#removeModelChangedListener" class="linkMethod">Diagram.removeModelChangedListener</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{function(ChangedEvent)}</span> <b>listener</b>
                                          
                                      </dt>
                                      <dd>a function that takes a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> as its argument.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="removeNodeData">
                <td class="name">
                  
                  <div class="name">
                    removeNodeData(nodedata)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>When you want to remove a node or group from the diagram,call this method with an existing data object.<span class="nodetails" id="xmethremoveNodeData"><a class="morelink" onclick="hst('methremoveNodeData')">More...</a></span> <span class="details" id="methremoveNodeData">This will remove that data from the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> andnotify all listeners that a node data object has been removed from the collection.</span><div class="details" id="dmethremoveNodeData"><p>If you do not have a reference to the particular data object that is in the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a>,you may need to search for it by iterating through that Array,or by finding the desired <a href="../symbols/Node.html" class="linkConstructor">Node</a> or simple #Part in a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> and getting that node's <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a>,or most likely by calling <a href="../symbols/Model.html#findNodeDataForKey" class="linkMethod">findNodeDataForKey</a>.<p>Removing a node data from a model does not automatically removeany connected link data from the model.Removing a node data that represents a group does not automatically removeany member node data or link data from the model.<p>To add a node to the diagram, you can add its data object by calling <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a>.<p>To add or remove an object or value from an item array, call <a href="../symbols/Model.html#insertArrayItem" class="linkMethod">insertArrayItem</a> or <a href="../symbols/Model.html#removeArrayItem" class="linkMethod">removeArrayItem</a>.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>nodedata</b>
                                          
                                      </dt>
                                      <dd>a JavaScript object represented by a node, group, or non-link.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="removeNodeDataCollection">
                <td class="name">
                  
                  <div class="name">
                    removeNodeDataCollection(coll)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.3</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Remove from this model all of the node data held in an Array or in an <a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a> of node data objects.<span class="nodetails" id="xmethremoveNodeDataCollection"><a class="morelink" onclick="hst('methremoveNodeDataCollection')">More...</a></span> <span class="details" id="methremoveNodeDataCollection"></span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Iterable.<Object>|Array.<Object>}</span> <b>coll</b>
                                          
                                      </dt>
                                      <dd>a collection of node data objects to remove from the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a></dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="rollbackTransaction">
                <td class="name">
                  
                  <div class="name">
                    rollbackTransaction()
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Rollback the current transaction, undoing any recorded changes.<span class="nodetails" id="xmethrollbackTransaction"><a class="morelink" onclick="hst('methrollbackTransaction')">More...</a></span> <span class="details" id="methrollbackTransaction">This just calls <a href="../symbols/UndoManager.html#rollbackTransaction" class="linkMethod">UndoManager.rollbackTransaction</a>.</span>
                 
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{boolean}</span> the value returned by <a href="../symbols/UndoManager.html#rollbackTransaction" class="linkMethod">UndoManager.rollbackTransaction</a>.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="setCategoryForNodeData">
                <td class="name">
                  
                  <div class="name">
                    setCategoryForNodeData(nodedata, cat)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Change the category of a given node data, a string naming the node templateor group template or part templatethat the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> should use to represent the node data.<span class="nodetails" id="xmethsetCategoryForNodeData"><a class="morelink" onclick="hst('methsetCategoryForNodeData')">More...</a></span> <span class="details" id="methsetCategoryForNodeData"></span><div class="details" id="dmethsetCategoryForNodeData"><p>Changing the node template for a node data will cause the existing <a href="../symbols/Node.html" class="linkConstructor">Node</a>, <a href="../symbols/Group.html" class="linkConstructor">Group</a>, or <a href="../symbols/Part.html" class="linkConstructor">Part</a>to be replaced with a new <a href="../symbols/Node.html" class="linkConstructor">Node</a>, <a href="../symbols/Group.html" class="linkConstructor">Group</a>, or <a href="../symbols/Part.html" class="linkConstructor">Part</a>created by copying the new node template and applying any data-bindings.</div>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Model.html#nodeCategoryProperty" class="linkProperty">nodeCategoryProperty</a></li>
                                
                                    <li><a href="../symbols/Model.html#getCategoryForNodeData" class="linkMethod">getCategoryForNodeData</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>nodedata</b>
                                          
                                      </dt>
                                      <dd>a JavaScript object represented by a node, group, or non-link.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string}</span> <b>cat</b>
                                          
                                      </dt>
                                      <dd>Must not be null.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="setDataProperty">
                <td class="name">
                  
                  <div class="name">
                    setDataProperty(data, propname, val)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Change the value of some property of a node data, a link data, an item data, or the <a href="../symbols/Model.html#modelData" class="linkProperty">Model.modelData</a>,given a string naming the property and the new value,in a manner that can be undone/redone and that automatically updates any bindings.<span class="nodetails" id="xmethsetDataProperty"><a class="morelink" onclick="hst('methsetDataProperty')">More...</a></span> <span class="details" id="methsetDataProperty"></span><div class="details" id="dmethsetDataProperty"><p>This gets the old value of the property; if the value is the same as the new value, no side-effects occur.This calls <a href="../symbols/Model.html#raiseDataChanged" class="linkMethod">raiseDataChanged</a> to notify about the change.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>data</b>
                                          
                                      </dt>
                                      <dd>a JavaScript object typically the value of a <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> and represented by a Node, Link, Group, simple Part,                     or item in a <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>; or this model's <a href="../symbols/Model.html#modelData" class="linkProperty">modelData</a>.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string}</span> <b>propname</b>
                                          
                                      </dt>
                                      <dd>a string that is not null or the empty string.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{*}</span> <b>val</b>
                                          
                                      </dt>
                                      <dd>the new value for the property.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="setKeyForNodeData">
                <td class="name">
                  
                  <div class="name">
                    setKeyForNodeData(nodedata, key)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.1</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Change the unique key of a given node data that is already in this model.<span class="nodetails" id="xmethsetKeyForNodeData"><a class="morelink" onclick="hst('methsetKeyForNodeData')">More...</a></span> <span class="details" id="methsetKeyForNodeData">The new key value must be unique -- i.e. not in use by another node data object.You can call <a href="../symbols/Model.html#findNodeDataForKey" class="linkMethod">findNodeDataForKey</a> to check if a proposed new key is already in use.</span><div class="details" id="dmethsetKeyForNodeData"><p>This operation will check all data objects in the model and replace all referencesusing the old key value with the new one.<p>If this is called on a node data object that is not (yet) in this model,this unconditionally modifies the property to the new key value.</div>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">nodeKeyProperty</a></li>
                                
                                    <li><a href="../symbols/Model.html#getKeyForNodeData" class="linkMethod">getKeyForNodeData</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>nodedata</b>
                                          
                                      </dt>
                                      <dd>a JavaScript object represented by a node, group, or non-link.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string|number}</span> <b>key</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="startTransaction">
                <td class="name">
                  
                  <div class="name">
                    startTransaction(tname)
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Begin a transaction, where the changes are held by a <a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a> objectin the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.<span class="nodetails" id="xmethstartTransaction"><a class="morelink" onclick="hst('methstartTransaction')">More...</a></span> <span class="details" id="methstartTransaction">This just calls <a href="../symbols/UndoManager.html#startTransaction" class="linkMethod">UndoManager.startTransaction</a>.</span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string=}</span> <b>tname</b>
                                          
                                      </dt>
                                      <dd>a descriptive name for the transaction.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{boolean}</span> the value returned by <a href="../symbols/UndoManager.html#startTransaction" class="linkMethod">UndoManager.startTransaction</a>.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="toIncrementalJson">
                <td class="name">
                  
                  <div class="name">
                    toIncrementalJson(e, classname)
                  </div>
                  <div class="attributes">
                    <span class="light">{string}</span>
                    
                      <span class="since" title="since">1.6</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Produce a JSON-format string representing the changes in the most recent <a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a>.<span class="nodetails" id="xmethtoIncrementalJson"><a class="morelink" onclick="hst('methtoIncrementalJson')">More...</a></span> <span class="details" id="methtoIncrementalJson">This writes out JSON for a model, but recording only changes in the given Transaction,with the addition of the "incremental" property to mark it as different from a complete model.Instead of the "nodeDataArray" property (and "linkDataArray" property for <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>s),this will have "inserted...", "modified...", and "removed..." properties that are non-empty Arrays.</span><div class="details" id="dmethtoIncrementalJson"><p>The "modifiedNodeData" Array holds JavaScript objects.The "insertedNodeKeys" and "removedNodeKeys" Arrays hold keys (numbers or strings) of data,not whole objects, that have been added and/or deleted.The "modelData" property holds the Link#modelData object, if it was modified.<p>Note that it is entirely plausible for the same object be in or referenced by all three Arrays,because a single <a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a> can include adding a node, modifying it, and removing it.<p>The purpose of this method is to make it easier to send incremental changes to the server/database,instead of sending the whole model.Whereas it has always been easy to perform "batch" updates or "file saves":<pre>  myDiagram.addModelChangedListener(function(e) {    if (e.isTransactionFinished) {      var json = e.model.toJson();      // save the whole model upon each transaction completion or undo/redo      ... send to server/database ...    }  });</pre>You can now easily send "incremental" updates:<pre>  myDiagram.addModelChangedListener(function(e) {    if (e.isTransactionFinished) {      var json = e.model.toIncrementalJson(e);      // record each Transaction as a JSON-format string      ... send to server/database ...    }  });</pre>Note that these incremental changes include the results of undo and redo operations.Also, when you might call <a href="../symbols/Model.html#applyIncrementalJson" class="linkMethod">applyIncrementalJson</a>, you will need to disable your Changed listener,so that it does not send spurious changes to your database during the process of apply incremental changes from the database.<p>For <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>s, this method requires that <a href="../symbols/GraphLinksModel.html#linkKeyProperty" class="linkProperty">GraphLinksModel.linkKeyProperty</a> is not an empty string.The incremental JSON for GraphLinksModels will include "modifiedLinkData", "insertedLinkKeys", and "removedLinkKeys"properties that are non-empty Arrays.<p>The same restrictions on data property names and data property values applies to this method as it does to <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a>.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>}</span> <b>e</b>
                                          
                                      </dt>
                                      <dd>a Transaction ChangedEvent for which <a href="../symbols/ChangedEvent.html#isTransactionFinished" class="linkProperty">ChangedEvent.isTransactionFinished</a> is true</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string=}</span> <b>classname</b>
                                          
                                      </dt>
                                      <dd>for the written model, defaults to the name of the class of the model</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{string}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="toJson">
                <td class="name">
                  
                  <div class="name">
                    toJson(classname)
                  </div>
                  <div class="attributes">
                    <span class="light">{string}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Generate a string representation of the persistent data in this model, in JSON format.<span class="nodetails" id="xmethtoJson"><a class="morelink" onclick="hst('methtoJson')">More...</a></span> <span class="details" id="methtoJson"></span><div class="details" id="dmethtoJson"><p>Object properties that are not enumerable or whose names start with "_" are not written out.<p>Functions are not able to be written in JSON format, so any properties that have function valueswill not be saved in the JSON string.<p>There must not be any circular references within the model data.Any sharing of object references will be lost in the written JSON.<p>Most object classes cannot be serialized into JSON without special knowledge and processing at both ends.The <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a> and <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> methods automatically do such processing for numbers that are NaNand for objects that are of class <a href="../symbols/Point.html" class="linkConstructor">Point</a>, <a href="../symbols/Size.html" class="linkConstructor">Size</a>, <a href="../symbols/Rect.html" class="linkConstructor">Rect</a>, <a href="../symbols/Margin.html" class="linkConstructor">Margin</a>, <a href="../symbols/Spot.html" class="linkConstructor">Spot</a>,<a href="../symbols/Brush.html" class="linkConstructor">Brush</a> (but not for brush patterns), and for <a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a>.However, we recommend that you use Binding converters (static functions named "parse" and "stringify")to represent Points, Sizes, Rects, Margins, Spots, and Geometries as string values in your data, rather than as Objects.This makes the JSON text smaller and simpler and easier to read.<p>Typical usage:<pre class="javascript">var modelAsText = myDiagram.model.toJson();// now save this text string by sending it to your database</pre></div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string=}</span> <b>classname</b>
                                          
                                      </dt>
                                      <dd>The optional name of the model class to use in the output;    for the standard models, this is their class name prefixed with "go.".</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{string}</span> a String in JSON format containing all of the persistent properties of the model.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="updateTargetBindings">
                <td class="name">
                  
                  <div class="name">
                    updateTargetBindings(data, srcpropname)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Find a <a href="../symbols/Part.html" class="linkConstructor">Part</a> corresponding to the given data andcall its <a href="../symbols/Panel.html#updateTargetBindings" class="linkMethod">Panel.updateTargetBindings</a> method, in each <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>that uses this Model.<span class="nodetails" id="xmethupdateTargetBindings"><a class="morelink" onclick="hst('methupdateTargetBindings')">More...</a></span> <span class="details" id="methupdateTargetBindings"></span><div class="details" id="dmethupdateTargetBindings"><p>Caution: setting a data property without calling <a href="../symbols/Model.html#setDataProperty" class="linkMethod">setDataProperty</a>and then calling this updateTargetBindings method will update GraphObjects that are bound to the property,but such data settings will not be recorded in the UndoManager and therefore will not be undone/redone,causing an inconsistency between the GraphObjects and the part data.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Object}</span> <b>data</b>
                                          
                                      </dt>
                                      <dd>The data object in this model that was modified.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string=}</span> <b>srcpropname</b>
                                          
                                      </dt>
                                      <dd>If not present or the empty string,  update all bindings on the target <a href="../symbols/Part.html" class="linkConstructor">Part</a> or item <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>;  otherwise update only those bindings using this source property name.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

                
            
<!-- ============================== events summary ======================== -->
            

<!-- ============================== fields summary ===================== -->
            
                
                

            

<!-- ============================== constructor details ==================== -->

        </div> <!-- end contentBody -->
    </div> <!-- end row -->
    </div> <!-- end container-fluid -->

<!-- ============================== footer ================================= -->
        <div id="footer" class="fineprint" style="clear:both">
            Copyright &copy; 1998-2016 by <a href="https://www.nwoods.com/">Northwoods Software Corporation.</a>
        </div>
    </body>
</html>
